<template>
  <div>
    <el-form
      ref="form"
      :rules="ruleCustom"
      :model="form"
    >
      <el-form-item
        prop="name"
        label="唯一标识"
      >
        <el-input
          v-model="form.name"
          placeholder="请输入1-50位字符"
          :maxlength="50"
        />
      </el-form-item>
      <el-form-item
        prop="display_name"
        label="权限名称"
      >
        <el-input
          v-model="form.display_name"
          placeholder="请输入权限名称"
        />
      </el-form-item>
      <el-form-item
        prop="description"
        label="描述"
      >
        <el-input
          v-model="form.description"
          placeholder="权限描述"
          type="textarea"
          maxlength="255"
          show-word-limit
        />
      </el-form-item>
      <el-form-item class="text-center">
        <el-button
          @click="submit('form')"
          :loading="btnload"
        >提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { fetchPermission, editPermission } from "@/api";
export default {
  data() {
    return {
      form: {
        display_name: "",
        btnload: false,
        name: "",
        description: "",
        pid: 0
      },
      ruleCustom: {
        name: [
          { required: true, message: "唯一标识不能为空", trigger: "blur" },
          { max: 50, min: 1, message: "唯一标识为1到50位字符", trigger: "blur" }
        ],
        display_name: [
          { required: true, message: "权限名称不能为空", trigger: "blur" }
        ],
        description: [
          {
            max: 10,
            message: "描述至多100位字符",
            trigger: "blur"
          }
        ]
      }
    };
  },
  props: ["pdata"],
  created() {
    this.btnload = true;
    fetchPermission(
      this.pdata.id,
      res => {
        this.btnload = false;
        this.form.pid = res.data.pid;
        this.form.display_name = res.data.display_name;
        this.form.name = res.data.name;
        this.form.description = res.data.description;
      },
      err => {}
    );
  },
  methods: {
    submit(data) {
      this.$submit(this, data, () => {
        this.btnload = true;
        editPermission(
          this.pdata.id,
          this.form,
          res => {
            this.btnload = false;
            this.$emit("close", true);
          },
          err => {
            this.btnload = false;
          }
        );
      });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
